<template>
  <van-nav-bar title="拼团详情" left-text="" left-arrow @click-left="goBack" />
  <div class="box">
      <van-circle v-model:current-rate="count" :rate="count" :speed="100" :color="gradientColor" :text="`拼团进度：${count}%`"
          size="220px" />
  </div>
  <div class="box_time">
      <van-count-down :time="time" format="HH 时 mm 分 ss 秒" />
  </div>
  <van-card :price="info.product.team" :thumb="info.product.thumbs_text">
      <template #title>
          <h3>{{ info.product.name }}</h3>
      </template>
      <template #desc>
          <div> 人数：<span style="color: red;">{{ info.total }}</span> 人</div>
          <div> 拼团时间：{{ info.createtime_text }} (开始) ~ {{ info.endtime_text }} (结束)</div>
      </template>
  </van-card>
  <div class="item" v-for="(item, index) in list" :key="item.id">
      <van-image width="50px" height="50px" fit="cover" :src="item.business.avatar_text" />
      <div class="info">
          <div class="nickname" v-if="index == 0">{{ item.business.nickname }}(发起人)</div>
          <div class="nickname" v-else>{{ item.business.nickname }}</div>
          <div class="time">拼单时间：{{ item.createtime }}</div>
      </div>
  </div>
  <div class="actions">
      <van-button type="danger" size="large">参与拼团</van-button>
      <van-button type="warning" size="large">发起拼团</van-button>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/team/index') }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))

const teamid = ref(proxy.$route.query.teamid ?? 0)
// 拼团进度
const count=ref(0)
const time = ref(30 * 60 * 60 * 1000);
const gradientColor = {
    '0%': '#3fecff',
    '100%': '#6149f6',
};
// 拼团信息
const info = ref({
    product: {}
})
// 拼团参与人信息
const list = ref([])



onBeforeMount(()=>{
  getTeamInfo()
})
const getTeamInfo = async ()=>{
  let result=await Api.TeamInfo({teamid:teamid.value})
  if (result.code == 1) {
    info.value=result.data.team
    list.value=result.data.list

    // 拼团进度  参与人数/拼团人数
    let num=parseFloat(list.value.length/info.value.total).toFixed(2)
    count.value=num*100

    // 倒计时
    time.value=parseInt(info.value.endtime - info.value.createtimes)*1000
  }
}
</script>

<style>
.box {
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.box .van-circle__text {
    font-size: 20px;
}

.box_time .van-count-down {
    font-size: 20px;
    text-align: center;
    line-height: 45px;
}

.item {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    padding-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.item .info {
    margin-left: 10px;
    text-align: left;
}

.item .info .nickname,
.item .info .time {
    font-size: 16px;
    font-weight: bold;
}

.actions {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

.van-button{
    border-radius: 0;
}
.van-card__content{
  text-align: left;
}
</style>